<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/mi_project/js/jquery.js"></script>
    <script src="/mi_project/js/jquery.cookie.js"></script>
    <script src="/mi_project/js/common.js"></script>
    <link rel="stylesheet" href="/mi_project/css/base.css">
    <link rel="stylesheet" href="/mi_project/css/index-top.css">
    <link rel="stylesheet" href="/mi_project/css/page.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2917027_4icbe1xja37.css">
    <script src="/mi_project/layui/layui.js"></script>
    <link rel="stylesheet" href="/mi_project/layui/css/layui.css">
</head>

<body>
    <div class="header-1">
    </div>
    <div class="header-2">
    </div>
    <div class="pageMain">
        <div class="topGoodsList-right">
            <!-- <dl>
                <dt class="topGoodsImg"></dt>
                <dd class="topGoodsName"></dd>
                <dd class="topGoodsBody"></dd>
                <dd class="topGood-Price">
                    <del class="topGood-marketPrice"></del>
                    <span class="topGood-shopPrice"></span>
                </dd>
            </dl> -->
        </div>
    </div>
    <div class="pageLayui">
        <div id="test1"></div>
    </div>
</body>

</html>
<script>
    $.ajax({
        url: urls + '/goods/lists',
        data: {
            page: 1,
            pageSize: 999,
            categoryId: getUrlParam('id')
        },
        success: function (backData) {
            console.log(backData);
            layui.use('laypage', function () {
                var laypage = layui.laypage;
                laypage.render({
                    elem: 'test1',
                    limit: 3,
                    count: backData.data.length,
                    jump: function (obj, first) {
                        pageGoods(obj.curr)
                    }
                    });
            });
        }
    })



    function pageGoods(data) {
        $.ajax({
            url: urls + '/goods/lists',
            data: {
                page: data,
                pageSize: 3,
                categoryId: getUrlParam('id')
            },
            success: function (backData) {
                console.log(backData);
                $('.topGoodsList-right').html('');
                for (let key in backData.data) {
                    let dom = $('<dl>');
                    dom.html(`
                    <dt class="topGoodsImg" style="background-image:url(${backData.data[key].goodsImg})"></dt>
                    <dt class="topGoodsName">${backData.data[key].goodsName}</dt>
                    <dt class="topGoodsBody">${backData.data[key].goodsBody}</dt>
                    <dd class="topGood-Price">
                        <del class="topGood-marketPrice">${backData.data[key].marketPrice}</del>
                        <span class="topGood-shopPrice">${backData.data[key].shopPrice}</span>
                    </dd>
                    `);
                    $('.topGoodsList-right').append(dom);
                    dom.click(function () {
                        location.href = `details.html?id=${backData.data[key].id}`;
                    })
                }
            }
        })
    }
    // pageGoods(1)
</script>